<template>
  <d2-container>
    <el-main>
      <h3>教室名称：</h3>
      <el-input placeholder="请输入教室名称" v-model="name" :disabled="disabled"></el-input>
      <h3>教室编号：</h3>
      <el-input placeholder="请输入教室编号" v-model="room" :disabled="disabled"></el-input>
      <h3>教室人数限制：</h3>
      <el-input
        placeholder="请输入教室人数限制"
        min="0"
        v-model="studentLimit"
        type="number"
        :disabled="disabled"
      ></el-input>
      <h3>所属校区：</h3>
      <el-select
        v-model="school"
        filterable
        placeholder="可输入名称搜索"
        :disabled="disabled"
      >
        <el-option v-for="item in schoolList" :key="item._id" :label="item.name" :value="item._id"></el-option>
      </el-select>
    </el-main>
    <el-footer>
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="edit" v-show="editShow">修改</el-button>
    </el-footer>
  </d2-container>
</template>

<script>
// import { request } from "http";
import request from "@/plugin/axios";
import { constants } from "crypto";
export default {
  data() {
    return {
      editShow: false,
      disabled: false,
      schoolList: [],
      id: undefined,
      name: undefined,
      school: undefined,
      room:undefined,
      studentLimit: undefined
    };
  },
  methods: {
    submit() {
      var data = {};
      data.name = this.name
      data.room = this.room
      data.studentLimit = this.studentLimit
      data.school = this.school
      var url = "/classroom/addClassroom";
      if (this.id != undefined) {
        data.classroom = this.id;
        url = "/classroom/updateClassroom";
      }
      data.name = this.name
      data.room = this.room
      data.studentLimit = this.studentLimit
      data.school = this.school
      request({
        url: url,
        method: "post",
        data
      }).then(res => {
        if (res.code == 200) {
          this.$alert("", "提交成功", {
            confirmButtonText: "确定"
          });
        }
        // 返回数据
      });
    },
    edit() {
      this.disabled = false;
    },
    getSchoolList(page, pageSize) {
      var data = {};
      (data.page = page), (data.pageSize = pageSize);
      request({
        url: "/school/getSchoolList",
        method: "post",
        data
      }).then(res => {
        this.schoolList = res.data.school;
        // 返回数据
      });
    },
    getClassroomOne(id) {
      request({
        url: "/classroom/getClassroomOne",
        method: "post",
        data: { id: id }
      })
        .then(res => {
          this.id = res.data._id;
          this.name = res.data.name;
          this.school = res.data.school;
          this.studentLimit = res.data.number;
          this.room = res.data.room;
        })
        .then(res => {
        });
    }
  },
  created() {
    if (this.$route.query.id != undefined) {
      this.editShow = true;
      this.disabled = true;
      this.getClassroomOne(this.$route.query.id);
    }
    this.getSchoolList(1, 99999);
  }
};
</script>
